<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/common.css">
	</head>
	<body>
		<!-- 头部 -->
		<div class="container-fluid">
			<!-- <header> -->
			<div id="header" class="row no-gutters">
					<!-- 首页导航栏--折叠导航 -->
					<div class="my_head">
						<div class="navbar navbar-dark bg-dark navbar-expand-lg pt-0 pl-0">
							<a href="#" class="navbar-brand pt-0"><img src="img/logo.png" alt=""></a>
							<button data-toggle="collapse" data-target="#d1" class="navbar-toggler">
								<span class="navbar-toggler-icon"></span>
							</button>
							<div id="d1" class="collapse navbar-collapse">
								<ul class="navbar-nav">
									<li class="nav-item">
										<a href="#" class="nav-link">Home</a>
									</li>
									<li class="nav-item">
										<a href="#" class="nav-link">Menu</a>
									</li>
									<li class="nav-item">
										<div class="dropdown">
											<!-- <button data-toggle="dropdown" class="dropdown-toggle"> --><a href="#" class="nav-link">Pages</a><!-- </button> -->
											<!-- <ul class="dropdown-menu">
												<li><a href="#">About</a></li>
												<li><a href="#">Elements</a></li>
											</ul> -->
										</div>
									</li>
									<li class="nav-item">
										<a href="#" class="nav-link">Blog</a>
									</li>
									<li class="nav-item">
										<a href="#" class="nav-link">Contact</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="my_lunbo d-flex flex-column align-items-center justify-content-center">
						<div>
							<h3 class="font_size py-5 text-white font-weight-bold">Fresh and Delicious Food <br>For your Health</h3>
							<a class="a_btn" href="#">View Menus</a>
						</div>
					</div>
			</div>
		</div>
		<!-- section部分 -->
		<section>
			<div class="container-fluid">
				<div class="row no-gutters">
					<div class="col-sm-12 col-lg-6 d-flex flex-column pl-5">
						<img class="img_1" src="img/1.png" alt="">
						<h2 class="mt-5 pt-5 ">Sed ut perspiciatis unde <br>omnis iste natus</h2>
						<p class="text-muted pt-4">Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. Exercitation photo booth stumptown tote bag todo Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation photo booth et 8-bit kale chips proident chillwave deep vow laborum. Aliquip veniam delectus, marfa eiusmod pinterest.</p>
						<div class="row no-gutters d-flex mt-lg-5">
							<div class="img_svg col-md-6">
								<img class="w-md-25 mt-sm-5 mt-md-0 px-3" src="img/salad.svg" alt="">
								<a href="#">Fresh Ingredients</a>
							</div>
							<div class="img_svg col-md-6">
								<img class="w-md-25 mt-sm-5 mt-md-0 px-3" src="img/tray.svg" alt="">
								<a href="#">Expert cooker</a>
							</div>
						</div>
					</div>
					<div id="right_img" class="col-sm-12 col-lg-6 text-center">
						<div class="mt-5 pt-lg-5">
							<img src="img/big.png" alt="">
							<img src="img/small.png" alt="">
						</div>
					</div>
					<div class="col-md-6 d-sm-none d-md-block"><img class="img_2" src="img/2.png" alt=""></div>
					<div class="col-md-6 d-sm-none d-md-block"><img class="img_3" src="img/3.png" alt=""></div>
				</div>
			</div>
		</section>
		<!-- 菜单menu页面 -->
		<div id="menu" class="container-fluid">
			<div class="row no-gutters">
				<div class="col-12">
					<h2 class="mt-lg-5 py-5 text-center">Delicious Food For You</h2>
					<ul class="list-unstyled d-flex justify-content-center">
						<li>
							<img class="w-100" src="img/breakfast.png" alt="">
							<p>Dinner</p>
						</li>
						<li>
							<img class="w-100" src="img/lunch.png" alt="">
							<p>Lunch</p>
						</li>
						<li>
							<img class="w-100" src="./img/dinner.png" alt="">
							<p>Dinner</p>
						</li>
					</ul>
				</div>
				<!-- 主菜单 -->
				<div class="col-sm-12 col-md-6 mb-sm-5 mb-md-0 pl-5">
					<div class="row no-gutters">
						<div class="col-lg-4 text-lg-center pb-lg-4">
							<img src="img/1%20(1).png" alt="">
						</div>
						<div class="col-lg-8 pl-lg-5 pt-md-4 pt-lg-0 text-md-left">
							<h4 class="mt-sm-2 mt-md-0">#12. Chicken Chilis</h4>
							<p class="text-muted">Craft beer elit seitan exercitation photo <br>booth et 8-bit kale chips.</p>
							<h3>$20</h3>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 mb-sm-5 mb-md-0 pl-5">
					<div class="row no-gutters">
						<div class="col-lg-4 text-lg-center pb-lg-4">
							<img src="img/2%20(1).png" alt="">
						</div>
						<div class="col-lg-8 pl-lg-5 pt-md-4 pt-lg-0 text-md-left">
							<h4 class="mt-sm-2 mt-md-0">#16. Chicken Chilis</h4>
							<p class="text-muted">Craft beer elit seitan exercitation photo <br>booth et 8-bit kale chips.</p>
							<h3>$20</h3>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 mb-sm-5 mb-md-0 pl-5">
					<div class="row no-gutters">
						<div class="col-lg-4 text-lg-center pb-lg-4">
							<img src="img/3%20(1).png" alt="">
						</div>
						<div class="col-lg-8 pl-lg-5 pt-md-4 pt-lg-0 text-md-left">
							<h4 class="mt-sm-2 mt-md-0">#10. Fried Rice</h4>
							<p class="text-muted">Craft beer elit seitan exercitation photo <br>booth et 8-bit kale chips.</p>
							<h3>$20</h3>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 mb-sm-5 mb-md-0 pl-5">
					<div class="row no-gutters">
						<div class="col-lg-4 text-lg-center pb-lg-4">
							<img src="img/4（1）.png" alt="">
						</div>
						<div class="col-lg-8 pl-lg-5 pt-md-4 pt-lg-0 text-md-left">
							<h4 class="mt-sm-2 mt-md-0">#08. Vegetable fry</h4>
							<p class="text-muted">Craft beer elit seitan exercitation photo <br>booth et 8-bit kale chips.</p>
							<h3>$20</h3>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 col-lg-6 mb-sm-5 mb-md-0 pl-5">
					<div class="row no-gutters">
						<div class="col-lg-4 text-lg-center pb-lg-4">
							<img src="img/5.png" alt="">
						</div>
						<div class="col-lg-8 pl-lg-5 pt-md-4 pt-lg-0 text-md-left">
							<h4 class="mt-sm-2 mt-md-0">#08. Vegetable fry</h4>
							<p class="text-muted">Craft beer elit seitan exercitation photo <br>booth et 8-bit kale chips.</p>
							<h3>$20</h3>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 mb-sm-5 mb-md-0 pl-5">
					<div class="row no-gutters">
						<div class="col-lg-4 text-lg-center pb-lg-4">
							<img src="img/6.png" alt="">
						</div>
						<div class="col-lg-8 pl-lg-5 pt-md-4 pt-lg-0 text-md-left">
							<h4 class="mt-sm-2 mt-md-0">#01. Chicken Chilis</h4>
							<p class="text-muted">Craft beer elit seitan exercitation photo <br>booth et 8-bit kale chips.</p>
							<h3>$20</h3>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Customer's Say页面 -->
		<div class="say">
			<div class="container-fluid">
				<div class="row no-gutters">
					<div class="say_text_1 col-12 text-center">Testimonials</div>
					<h3 class="col-12 text-center text-dark font-weight-bold">Our Customer’s Say</h3>
					<div class="col-sm-12 col-md-6 pt-5 pl-5">
						<div class="say_content">
							<p class="my-3 mx-3">“Donec imperdiet congue orci consequat mattis. Donec rutrum porttitor sollicitudin. Pellentesque id dolor tempor sapien feugiat ultrices nec sed
	neque.</p>
						</div>
						<div class="pt-3 d-flex">
							<div><img src="img/author.png" alt=""></div>
							<div class="pt-2 pl-3">
								<p>Robert Thomson</p>
								<img src="img/star.png" alt="">
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-md-6 pt-5 px-5 d-sm-none d-md-block">
						<div class="say_content">
							<p class="my-3 mx-3">“Donec imperdiet congue orci consequat mattis. Donec rutrum porttitor sollicitudin. Pellentesque id dolor tempor sapien feugiat ultrices nec sed
neque.</p>
						</div>
						<div class="pt-3 d-flex">
							<div><img src="img/author2.png" alt=""></div>
							<div class="pt-2 pl-3">
								<p>Robert Thomson</p>
								<img src="img/star.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- photo gallery页面 -->
		<div id="photo">
			<div class="container-fluid">
				<div class="row no-gutters">
					<h3 class="col-12 my-5 text-center">Photo Gallery</h2>
					<div class="my_photo col-sm-12 col-md-6 col-lg-5">
							<div class="pr-2 pb-2"><a href="#"><img class="w-100" src="img/p1.png" alt=""></a></div>
					</div>
					<div class="col-sm-12 col-md-6 col-lg-7">
						<div class="row no-gutters justify-content-around">
							<div class="col my_photo pr-sm-2">
								<div><a href="#"><img class="w-100" src="img/p2.png" alt=""></a></div>
							</div>
							<div class="col my_photo">
								<div class="pb-sm-2"><a href="#"><img class="w-100" src="img/p3.png" alt=""></a></div>
							</div>
						</div>
						<p class="text-center mt-5 d-sm-none d-md-block"><a class="btn btn-outline-info" href="#">CONTACT</a></p>
						<div class="reser d-sm-none d-md-block"><img src="img/1.png" alt=""></div>
					</div>
					<div class="col-sm-12 col-md-6 col-lg-7 pb-sm-2">
						<div class="row no-gutters">
							<div class="my_photo col pr-sm-2">
								<div><a href="#"><img class="w-100" src="img/p4.png" alt=""></a></div>
							</div>
							<div class="my_photo col pr-md-2">
								<div><a href="#"><img class="w-100" src="img/p5.png" alt=""></a></div>
							</div>
						</div>
						<p class="text-center mt-5 d-sm-none d-md-block"><a class="btn btn-outline-info" href="#">CONTACT</a></p>
						<div class="reser d-sm-none d-md-block"><img src="img/2.png" alt=""></div>
					</div>
					<div class="my_photo col-sm-12 col-md-6 col-lg-5">
							<div><a href="#"><img class="w-100" src="img/p6.png" alt=""></a></div>
					</div>
				</div>
			</div>
		</div>
		<!-- footer底部页面 -->
		<footer>
			<div class="container-fluid">
				<div class="row no-gutters">
					<div class="col-sm-12 col-md-6">
						<div class="row no-gutters">
							<div class="col mt-5 pt-5 pl-5">
								<img src="img/footer_logo.png" alt="">
								<div class="my_vw">5th flora, 700/D kings road, green lane New York-1782</div>
								<p><a href="#">＋10 367 826 2567</a></p>
								<a href="#">contact@carpenter.com</a>
								<p class="mt-3"><img class="bg-transparent"src="img/foot_1.png" alt=""></p>
							</div>
							<div class="col mt-5 pt-5 pl-5">
								<ul class="list-unstyled">
									<li class="pb-2"><p>Useful Links</p></li>
									<li class="mt-4 "><a href="#">Menu</a></li>
									<li class="mt-4"><a href="#">About</a></li>
									<li class="mt-4"><a href="#">Blog</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-md-6 pl-sm-5 mt-md-5 pt-md-5">
						<p>Subscribe</p>
						<input class="mt-3 mb-3 btn btn-light" type="text" placeholder="Enter your mail">
						<div class="mb-3">Esteem spirit temper too say adieus who direct esteem esteems luckily.</div>
					</div>
				</div>
			</div>
		</footer>
	</body>
</html>